<template>
  <div>

    <div style="position:absolute;left:30%;top: 20%">
      <el-upload
        drag
        class="upload"
        action
        :multiple="true"
        :show-file-list="true"
        accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        :http-request="httpRequest">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text"><em>点击上传</em></div>
      </el-upload>
    </div>

    <div style="position:absolute;left:80%;top: 15%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-tooltip class="item" effect="dark" content="柱状图" placement="top-start">
      <img style="width: 60px;height: 60px; " src="../../assets/bar.png" @click="bars" >
      </el-tooltip>
    </div>
    <div style="position:absolute;left:90%;top: 15%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-tooltip class="item" effect="dark" content="折线图" placement="top-start">
      <img style="width: 60px;height: 60px" src="../../assets/line.png" @click="line">
      </el-tooltip>
    </div>
    <div style="position:absolute;left:80%;top: 30%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-tooltip class="item" effect="dark" content="饼图" placement="top-start">
      <img style="width: 60px;height: 60px" src="../../assets/pie.png" @click="pie">
      </el-tooltip>
    </div>
    <div style="position:absolute;left:90%;top: 30%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-tooltip class="item" effect="dark" content="雷达图" placement="top-start">
      <img style="width: 60px;height: 60px" src="../../assets/radar.png" @click="radar">
      </el-tooltip>
    </div>
    <div style="position:absolute;left:80%;top: 45%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-tooltip class="item" effect="dark" content="堆叠图" placement="top-start">
      <img style="width: 60px;height: 60px" src="../../assets/pile.png" @click="dui">
      </el-tooltip>
    </div>
    <div style="position:absolute;left:90%;top: 45%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-tooltip class="item" effect="dark" content="关系图" placement="top-start">
      <img style="width: 60px;height: 60px" src="../../assets/graph.png" @click="graph">
      </el-tooltip>
    </div>
    <div style="position:absolute;left:80%;top: 60%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-tooltip class="item" effect="dark" content="散点图" placement="top-start">
      <img style="width: 60px;height: 60px" src="../../assets/scatter.png" @click="sandians">
      </el-tooltip>
    </div>
    <div style="position:absolute;left:90%;top: 60%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-tooltip class="item" effect="dark" content="树图" placement="top-start">
      <img style="width: 60px;height: 60px" src="../../assets/tree.png" @click="Trees">
      </el-tooltip>
    </div>
    <div style="position:absolute;left:80%;top: 75%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <el-tooltip class="item" effect="dark" content="矩形树图" placement="top-start">
      <img style="width: 60px;height: 60px" src="../../assets/treemap.png" @click="JTrees">
      </el-tooltip>
    </div>
  </div>
</template>

<script>
  import XLSX from "xlsx";
  export default {
    name: "CreateChart",
    data() {
      return {
        tableData: [],
        settings: {},
        myChart: null,
        xLength: null,
        yLength:null,
        Data: null,
        outdata: null,
      };
    },
    methods: {
      httpRequest(e) {
        let file = e.file; // 文件信息
        if (!file) {
          return false;
        } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
          this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
          return false;
        }
        const fileReader = new FileReader();
        let this_ = this;
        fileReader.onload = ev => {
          try {
            const data = ev.target.result;
            const res = XLSX.read(data, {
              type: "binary"
            });
            /*console.log(res)*/
            let sheetName = res.Sheets[res.SheetNames[0]]
            let table = XLSX.utils.sheet_to_json(sheetName, {
              header: 'A',
              raw: true,
              defval: ' '
            })

            this.outdata = XLSX.utils.sheet_to_json(res.Sheets[res.SheetNames[0]], {
              header: 1,
              defval: ''
            });
            /*console.log("%%%%%%%", this.outdata)
            console.log("%%%%%%%", this.outdata[1][1])*/
            if (table.length) {
              this.settings.colHeaders = Object.values(table[0])
            } else {
              this.settings.colHeaders = []
            }
            this.settings.data = table.splice(1)
            this.xLength = this.settings.colHeaders.length
            this.yLength = this.settings.data.length
            /*console.log("表头长度", this.yLength)
            console.log("settings", this.settings)
            console.log("settings.data", this.settings.data)
            console.log("settings.data[0]", this.settings.data[0])
            console.log("settings.colHeaders", this.settings.colHeaders)*/
            this.updateChart()
          } catch (e) {
            console.log("出错了：：");
            return false;
          }
        };
        fileReader.readAsBinaryString(file);
      },

      bars() {
        this.$router.push({
          path: "/CreateEcharts/bar",
          query: {
            b: this.settings
          }
        });
      },
      line() {
        this.$router.push({
          path: "/CreateEcharts/line",
          query: {
            b: this.settings
          }
        });
      },
      radar() {
        this.$router.push({
          path: "/CreateEcharts/radar",
          query: {
            a: this.settings,
            b: this.yLength,
            c: this.xLength,
            d: this.outdata,
          }
        });
      },
      graph() {
        this.$router.push({
          path: "/CreateEcharts/graph",
          query: {
            a: this.settings,
            b: this.yLength,
            c: this.xLength,
            d: this.outdata,
          }
        });
      },
      dui(){
        this.$router.push({
          path:"/CreateEcharts/dui",
          query: {
            b:this.settings,
          }
        });
      },
      pie(){
        this.$router.push({
          path:"/CreateEcharts/pie",
          query: {
            b:this.settings,
          }
        });
      },
      sandians() {
        this.$router.push({
          path: "/CreateEcharts/sandians",
          query: {
            b:this.settings,
          }
        });
      },
      Trees() {
        this.$router.push({
          path: "/CreateEcharts/Trees",
          query: {
            b:this.settings,
          }
        });
      },
      JTrees() {
        this.$router.push({
          path: "/CreateEcharts/JTrees",
          query: {
            b:this.settings,
          }
        });
      }

    }
  }
</script>

<style>


</style>
